<template>
    <div class="login">
        <el-card class="box-card" shadow="never">
            <div slot="header" class="clearfix">
                <h3>课程管理系统</h3>
            </div>

            <el-form :model="form" :rules="rules" ref="loginForm">
                <el-form-item prop="username">
                    <el-input placeholder="请输入账号" v-model="form.username">
                        <template slot="prepend"><i class="el-icon-user"></i></template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input placeholder="请输入密码" v-model="form.password" type="password">
                        <template slot="prepend"><i class="el-icon-edit"></i></template>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-radio-group v-model="form.userType">
                        <el-radio :label="1" default>学生</el-radio>
                        <el-radio :label="2">教师</el-radio>
                        <el-radio :label="3">教务管理员</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-button type="primary" @click="submit">登录</el-button>
            </el-form>

        </el-card>
    </div>
</template>

<script>
import { login } from '@/api/admin/user'

export default {
    data() {
        return {
            form: {
                userType: 3,
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入账号", trigger: 'blur' }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        submit() {
            this.$refs["loginForm"].validate(flag => {
                if (flag) {
                    login(this.form).then(res => {
                        console.log(res)
                        if (res.data?.loggedIn) {
                            this.$message({
                                type: 'success',
                                message: "登陆成功"
                            })
                            this.$store.commit("user/updateLoggedIn")
                            this.$store.commit("user/updateUserType", res.data.userType)
                            this.$store.commit("user/updatePermission", res.data.permission)
                            this.$router.push("/index", () => { })
                        }
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../assets/login-background.jpg");
    background-size: cover;

    .box-card {
        width: 400px;
        background-color: rgba(59, 59, 59, 0.6);

        .text {
            font-size: 14px;
            color: #000;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix {
            text-align: center;
            color: #fff;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-radio-group {
            width: 100%;
        }

        .el-button {
            width: 100%;
        }

        .el-radio {
            color: #fff;
        }
    }
}
</style>